import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// We are using Webpack code splitting here so that each route's associated
// component code is loaded on-demand only when the route is visited.
// It's actually not really necessary for a small project of this size but
// the goal is to demonstrate how to do it.
//
// Note that the dynamic import syntax should actually be just `import()`
// but buble/acorn doesn't support parsing that syntax until it's stage 4
// so we use the old System.import here instead.
//
// If using Babel, `import()` can be supported via
// babel-plugin-syntax-dynamic-import.

const createListView = (name) => () =>
  System.import('../views/CreateListView').then(m => m.createListView(name));
const List = () => System.import('../views/mai_list.vue');
const Detail = () => System.import('../views/track_detail.vue');
const Search = () => System.import('../views/search.vue');

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/list',
      name: 'list',
      component: createListView('List')
    },
    {
      path: '/detail',
      name: 'track-detail',
      component: createListView('Detail')
    },
    {
      path: '/search',
      name: 'search',
      component: Search
    },
    {
      path: '/',
      redirect: '/list'
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    // 回到list页面的位置
    // if (savedPosition) {
    //   console.log(savedPosition);
    //   setTimeout(() => window.scrollTo(savedPosition.x, savedPosition.y), 5);
    // }
  }
})
